<template>
  <div class="btn-list" :class="{ 'active-btn-list': isActive }">
    <div class="btn-list-item" v-for="(item, index) in btnList" :key="item.name" :class="{ active: active === index }" @click="itemClick(item, index)">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: "MyBtnList",
    props: {
      btnList: {
        type: Array
      },
      isActive: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        active: 0
      }
    },
    methods: {
      itemClick(item, index) {
        this.active = index
        this.$emit('itemClick', index)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .btn-list {
    @include flex(flex-start, center);
    &.active-btn-list {
      border: 1px solid $menuActiveText;
      border-radius: 4px;
      .btn-list-item {
        background-color: transparent;
        &.active{ 
          p {
            color: #fff;
          }
        }
        p {
          color: $menuActiveText;
        }
        &:first-child, &:nth-child(2) {
          border-right: 1px solid $menuActiveText;
        }
      }
    }
    .btn-list-item {
      width: 64px;
      height: 32px;
      background: #FFF;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      &.active {
        background-color: #03A98E;
        p {
          color: #fff;
        }
      }
      p {
        color: $colour_6;
        font-size: $font_14;
      }
    }
  }
</style>